<template>
    <a-drawer :title="title" :width="600" @close="handleCancel(false)" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">

        <a-form-model ref="ruleForm" :model="form" :rules="rules">


            <!-- 车牌号-->
            <a-form-model-item label="车牌号码" prop="plateNo" ref="plateNo">
                <a-input :disabled="isUpdate"
                         :maxLength="20"
                         placeholder="填写车牌号码" v-model="form.plateNo"/>
            </a-form-model-item>
            <!-- 车牌类别-->
            <a-form-model-item label="车辆类别" prop="typeCode" ref="typeCode">
                <a-select

                        placeholder="请选择车辆所属类型" allowClear
                        showSearch
                        :filter-option="$exMod.cxOption"
                        v-model="form.typeCode">
                    <a-select-option v-for="(item, index) in VehicleTypeOPT" :key="index" :value="item.value">
                        {{item.label }}
                    </a-select-option>
                </a-select>


            </a-form-model-item>


            <!-- 车辆图片-->

            <a-form-model-item label="车辆图片" prop="picture" ref="picture">
                <a-upload
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                        :customRequest="customRequest"
                >
                    <img v-if="form.picture" :src="form.picture" class="picture" alt="请上传图片"/>
                    <div v-else>
                        <a-icon :type="loading ? 'loading' : 'plus'"/>
                        <div class="ant-upload-text">请上传车辆图片</div>
                    </div>
                </a-upload>
            </a-form-model-item>
            TODO: 修改车辆信息 修改订单数据

        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>

    import {fileUpload} from "../../../util/internal.api";
    import {VehicleTypeDict} from "../public/internal";
    import {vehicleAdd, vehicleUpdate} from '../public/http.js';

    export default {
        props: ['editRecord'],
        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '添加车辆',
                visible: true, //modal 显示状态

                form: {
                    typeCode: undefined,
                    plateNo: null,
                    picture: null,

                },
                rules: {

                    typeCode: {
                        required: true,
                        message: '请选择车辆所属类别',
                        trigger: 'blur'
                    },
                    plateNo: [
                        {
                            required: true,
                            message: '请填写车牌号码',
                            trigger: 'blur'
                        },
                        {
                            max: 9,
                            message: '车牌号码不能超过9个字符',
                            trigger: 'blur'
                        }

                    ],

                    picture: {
                        required: true,
                        message: '请上传车辆图片信息',
                        trigger: 'blur'
                    },


                },
                VehicleTypeOPT: [],

            };
        },
        methods: {

            //表单提交事件
            onSubmit() {
                const _this = this;
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;

                        if (this.isUpdate) {

                            this.$confirm({
                                title: '修改提醒',
                                content: "修改车辆信息有可能对当前车辆未支付订单产生价格影响 确定要修改车辆信息吗？",
                                onOk() {
                                    vehicleUpdate(_this.form.id, _this.form).then(res => {
                                        _this.$exMod.ajaxMessage(res);
                                        res.code === 0 ? _this.handleCancel(true) : null;


                                    })
                                }


                            });

                        } else {
                            vehicleAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                res.code === 0 ? this.handleCancel(true) : null;

                            })

                        }
                        this.loading = false;
                    }


                });
            },
            //关闭弹窗 刷新
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑车辆信息';
                }
            },
            //数据初始化
            async init() {
                await VehicleTypeDict().then(res => this.VehicleTypeOPT = res);
                this.fromVal();
            },


            //酒店系统长传方法
            customRequest(e) {
                const formData = new FormData();
                formData.append('file', e.file)
                fileUpload(formData).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.form.picture = res.data.url;
                    }
                })
            },
            //监听上传状态  uploading 开始
            handleChange(info) {

                if (info.file.status === 'uploading') {
                    this.loading = true;
                }
            },
            //上传之前数据检查
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('只允许上传JPG、PNG格式的图片文件');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('单个文件图片不能超过 2MB!');
                }
                return isJpgOrPng && isLt2M;
            },


        },
        created() {

            this.init();
        }
    };
</script>
<style scoped>

    .picture {
        width: 280px;
        height: 150px;
        overflow: hidden;
    }

</style>
